<template>
    <div>
        <el-card shadow="hover">
            <div slot="header" class="flex jusc">
                <div class="head-title">
                    <span>登录日志</span>
                    <span class="table-choose" v-show="multipleSelection.length > 0">已选中{{ multipleSelection.length }}个</span>
                </div>
                <div class="flex">
                    <div>
                        <el-date-picker v-model="date" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="head-btn">
                        <el-button type="primary">搜索</el-button>
                        <el-button type="danger">删除</el-button>
                    </div>
                </div>
            </div>
            <div>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="日期" width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                    <el-table-column prop="address" label="状态">
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary">详情</el-button>
                            <el-button size="mini" type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pag">
                <el-pagination background layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "login-log",
    data() {
        return {
            date: null,
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: [],
            searchContent: null, // 搜索内容
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        search() {

        }
    },
}
</script>

<style scoped>
.flex {
    display: flex;
    align-items: center;
}

.jusc {
    justify-content: space-between;
}

.head-btn {
    margin: 0 10px;
}

.login-log-list {
    background: rgb(248, 248, 248);
}

.pag {
    text-align: center;
    margin-top: 20px;
}

.head-title{
    font-size: 17px;
    font-weight: 550;
}

.table-choose{
    font-size: 13px;
    color: gray;
    margin-left: 10px;
}
</style>